<template>
  <div id="delivery-area">
    <div class="row">
      <div class="col-md-12 col-sm-12 col-xs-12">
        <span class="title">配送：</span>
        <span class="seller-loc">{{storeLoc}}</span>
        <span class="to">至</span>
        <span class="select-loc transition-ease" :class="{'selected': showArea}">
          <span @click="selectArea">{{selected.city || '请选择'}} <i class="transition-ease" :class="{ rotate: showArea}">></i></span>
          <div class="loc-container" v-show="showArea">
            <div class="header">
              <div class="item" :class="{'active': areaIndex == 0}" :title="selected.province" @click="showAreaIndex(0)">{{selected.province || '请选择'}}</div>
              <div class="item" v-show="citys.length > 0" :title="selected.city" :class="{'active': areaIndex == 1}" @click="showAreaIndex(1)">{{selected.city || '请选择'}}</div>
              <div class="item" v-show="countys.length > 0" :title="selected.county" :class="{'active': areaIndex == 2}" @click="showAreaIndex(2)">{{selected.county || '请选择'}}</div>
              <span class="fr iconfont ico-close" @click="showArea = false"></span>
            </div>
            <!-- 第一级 -->
            <div class="content clearfix" v-show="areaIndex == 0">
              <span class="place" v-for="(province, index) in allArea" :key="index" :class="{'red': selected.province == province.areaName}" @click="selectedProvince(province)">{{province.areaName}}</span>
            </div>
            <!-- 第二级 -->
            <div class="content clearfix" v-show="areaIndex == 1">
              <span class="place" v-for="(city, index) in citys" :title="city.areaName" :key="index" :class="{'red': selected.city == city.areaName}" @click="selectedCity(city)">{{city.areaName}}</span>
            </div>
            <!-- 第三级 -->
            <div class="content clearfix" v-show="areaIndex == 2">
              <span class="place" v-for="(county, index) in countys"  :key="index" :title="county.areaName" :class="{'red': selected.county == county.areaName}" @click="selectedCounty(county)">{{county.areaName}}</span>
            </div>
          </div>
        </span>
        <span>快递：￥{{shipPrice}}</span>
        <!-- 当前是期货还是现货 -->
        <span class="futures-flag">{{goodsTypeStr}}</span>
        <!-- 发货时间 -->
        <span class="delivery-time">{{deliveryTime}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
// 运费价格
import { apiGoodsDetailShipPrice } from '../../../common/api'

export default {
  props: {
    storeLoc: {
      type: String,
      default: ''
    },
    // 商品类型 0：普通商品 1：拼单商品
    goodsType: {
      type: [Number, String],
      default: 1
    },
    // 货源类型
    // 普通商品 1：现货 0：订货 3：现货且支持订货
    type0: {
      type: [Number, String],
      default: 1
    },
    // 货源类型
    // 拼单商品 1：现货 0：期货
    type1: {
      type: [Number, String],
      default: 1
    },
    time: {
      type: [String, Number],
      default: '1天'
    },
    endTime: {
      type: [String, Number],
      default: ''
    }
  },
  computed: {
    ...mapGetters(['allArea']),
    /**
     * 商品类型
     */
    goodsTypeStr() {
      // 如果当前是普通商品
      if (this.goodsType == 0) {
        // 如果传入的是
        if (this.type0 == 1) {
          return '现货'
        }
        // 如果传入的是
        if (this.type0 == 0) {
          return '订货'
        }
        // 如果传入的是
        if (this.type0 == 3) {
          return '现货且支持订货'
        }
      }
      // 如果当前是拼单商品
      if (this.goodsType == 1) {
        // 如果传入的是
        if (this.type1 == 0) {
          return '订货'
        }
        // 如果传入的是
        if (this.type1 == 1) {
          return '现货'
        }
      }
    },

    /**
     * 配送时间
     */
    deliveryTime() {
      // 如果当前是普通商品
      if (this.goodsType == 0) {
        // 如果是订货
        if (this.type0 == 0 && this.time) {
          return `下单后${this.time}内发货`
        }
        // 如果是现货
        if (this.type0 == 1) {
          return `下单后立即发货`
        }
        // 如果是现货，但支持订货
        if (this.type0 == 2) {
          return `下单后立即发货`
        }
      }
      // 如果当前是拼单商品
      if (this.goodsType == 1) {
        // 如果传入的是期货
        if (this.type1 == 0) {
          return `在倒计时结束后结束拼单`
        }
        // 如果传入的是现货
        if (this.type1 == 1) {
          return '下单后立即发货'
        }
      }
    }
  },
  data() {
    return {
      showArea: false,
      areaIndex: 0,
      citys: [],
      countys: [],
      selected: {
        province: '',
        city: '',
        county: ''
      },
      shipPrice: 0,
      params: {
        cityId: '',
        cityName: '',
        view: this.$route.query.token ? '1' : '',
        goodsList: [
          {
            id: this.$route.params.id,
            count: 1
          }
        ]
      }
    }
  },
  created() {
    this.fetchAllArea()
    this.getGoodsShipPrice()
  },
  methods: {
    ...mapActions(['fetchAllArea']),

    selectArea() {
      this.showArea = !this.showArea
    },

    /**
     * 展示地区选择的界面
     *
     * @param { Number } index 当前需要展示的第几个地区界面
     */
    showAreaIndex(index) {
      this.areaIndex = index
    },

    /**
     * 展示省
     * @param  { Object } province 当前省
     */
    selectedProvince(province) {
      // 选中省的名称
      this.selected.province = province.areaName

      // 展示下方的城市
      this.citys = province.childs

      // 展示选择城市界面
      this.areaIndex = 1

      // 删除城市
      this.selected.city = ''

      // 删除县
      this.selected.county = ''

      // 清空县城数据
      this.countys = []
    },

    /**
     * 展示城市
     * @param  { Object } city 当前城市
     */
    selectedCity(city) {
      // 选中城市的名称
      this.selected.city = city.areaName

      // 展示当前城市下的县（暂时不支持到县）
      // this.countys = city.childs

      // 展示选择县城界面（暂时不支持到县）
      // this.areaIndex = 2

      // 删除县（暂时不支持到县）
      // this.selected.county = ''

      // 获取县城的id
      this.params.cityId = city.id

      // 保存县的名称
      this.params.cityName = city.areaName

      // 查询运费
      this.getGoodsShipPrice()
    },

    /**
     * 选中县，暂时不支持到县
     * @param  { Object } county 当前县
     */
    selectedCounty(county) {
      // 记录当前点击的城市
      this.selected.county = county.areaName

      // 获取县城的id
      this.params.cityId = county.id

      // 保存县的名称
      this.params.cityName = county.areaName

      // 查询运费
      this.getGoodsShipPrice()
    },

    /**
     * 查询商品运费
     */
    getGoodsShipPrice() {
      apiGoodsDetailShipPrice(this.params).then((v) => {
        this.showArea = false
        this.shipPrice = v.shipPrice

        // 如果没有选择的城市，即第一次加载
        if (!this.selected.city) {
          this.selected.city = v.cityName
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
#delivery-area {
  .iconfont {
    color: #666666;
    font-size: 20px;
    margin-top: 4px;
    margin-right: 4px;
  }

  .title {
    color: #AAAAAA;
    display: inline-block;
    margin-left: 10px;
  }

  .seller-loc {
    display: inline-block;
    padding: 4px 6px;
    margin-left: 20px;
  }

  .select-loc {
    cursor: pointer;
    display: inline-block;
    padding: 4px 8px;
    position: relative;

    &.selected {
      background-color: #f00384;
      color: white;
    }

    i {
      display: inline-block;

      &.rotate {
        transform: rotate(90deg);
      } 
    }

    .loc-container {
      background-color: #FFFFFF;
      border: 1px solid #f00384;
      width: 520px;
      left: -120px;
      position: absolute;
      top: 24px;
      z-index: 2;

      .header {
        background-color: #f6f6f6;
        height: 30px;

        .item {
          color: #666666;
          display: inline-block;
          width: 90px;
          line-height: 30px;
          text-align: center;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;

          &.active {
            background-color: #FFFFFF;
            color: #f00384;
          }
        }
      }

      .content {
        padding: 2px;
        .place {
          color: #666666;
          display: inline-block;
          float: left;
          width: 68px;
          margin: 6px 2px;
          text-align: center;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;

          &.red {
            color: #f00384;
          }
        }
      }
    }
  }

  .futures-flag {
    background-color: #f00384;
    color: #FFFFFF;
    display: inline-block;
    font-size: 12px;
    padding: 4px;
    margin-left: 18px;
  }
  .delivery-time {
    color: #9b9b9b;
    margin-left: 6px;
    line-height: 20px;
  }
}
</style>